---
title: Store
description: API reference for Plate store.
---

`Plate` is using <Link href="https://github.com/pmndrs/jotai">jotai</Link> to store the state of the editor.

<Callout className="my-4">
  **Note**: To use the store hooks in a component, it needs to be rendered
  inside `Plate`.
</Callout>

## Plate Store

### State

The PlateStoreState object stores the state of the Plate editor. It contains information about the editor's ID, its current value, its plugins, and other settings.

<APIAttributes>
<APIItem name="editor" type="PlateEditor">
Slate editor reference.

- **Default:** `createPlateFallbackEditor()`
</APIItem>

<APIItem name="id" type="string">
A unique ID used as a provider scope. Use it if you have multiple `Plate` in the same React tree.

- **Default:** random id
</APIItem>

<APIItem name="decorate" type="function" optional>
Function used to decorate ranges in the editor.

``ts
(options: { editor: PlateEditor; entry: TNodeEntry }) => Range[]
``
</APIItem>

<APIItem name="isMounted" type="boolean" optional>
Whether `Editable` is rendered so slate DOM is resolvable.
</APIItem>

<APIItem name="onChange" type="function" optional>
Controlled callback called when the editor state changes.

``ts
(options: { editor: PlateEditor; value: ValueOf<PlateEditor> }) => void
``
</APIItem>

<APIItem name="onSelectionChange" type="function" optional>
Controlled callback called when the editor.selection changes.

``ts
(options: { editor: PlateEditor; selection: TSelection }) => void
``
</APIItem>

<APIItem name="onValueChange" type="function" optional>
Controlled callback called when the editor.children changes.

``ts
(options: { editor: PlateEditor; value: ValueOf<PlateEditor> }) => void
``
</APIItem>

<APIItem name="primary" type="boolean" optional>
Whether the editor is primary. If no editor is active, then PlateController will use the first-mounted primary editor.

- **Default:** `true`
</APIItem>

<APIItem name="readOnly" type="boolean" optional>
Whether the editor is read-only.
</APIItem>

<APIItem name="renderElement" type="function" optional>
Function to render elements in the editor.
</APIItem>

<APIItem name="renderLeaf" type="function" optional>
Function to render leaf nodes in the editor.
</APIItem>

<APIItem name="versionDecorate" type="number" optional>
Version incremented when calling `redecorate`. This is a dependency of the `decorate` function.
</APIItem>

<APIItem name="versionEditor" type="number" optional>
Version incremented on each editor change.
</APIItem>

<APIItem name="versionSelection" type="number" optional>
Version incremented on each editor.selection change.
</APIItem>

<APIItem name="versionValue" type="number" optional>
Version incremented on each editor.children change.
</APIItem>
</APIAttributes>

## Exposed Store Keys

The following store keys are exposed in `editor.setPlateState`:

- `readOnly`
- `onChange`
- `decorate`
- `renderElement`
- `renderLeaf`

## Selectors

Use `usePlateSelectors(id).<state property>()` when you need to subscribe to a value.

- **Example:** `const value = usePlateSelectors(id).value()` will subscribe to `value` changes.
- It's using <Link href="https://jotai.org/docs/utils/use-atom-value">useAtomValue</Link> under the hood.

## Actions

Use `usePlateStates(id).<state property>()` when you need both the value and the setter of a store property.

- **Example:** `const [value, setValue] = usePlateStates(id).value()`
- It's using <Link href="https://jotai.org/docs/basics/primitives#use-atom">useAtom</Link> under the hood.

### `useRedecorate`

Redecorate the editor.

<APIParameters>
  <APIItem name="id" type="string" optional>
    Editor ID.
  </APIItem>
</APIParameters>

## Event Editor Store

This store is an object whose property keys are event names (e.g. `'focus'`) and whose property values are [editor IDs](Plate#id).

- This is useful when having [multiple editors](multiple-editors) and get one based on DOM events (e.g. the last focused editor).
- One of the core plugins of [Plate](Plate) will store the following events.

### State

<APIAttributes>
<APIItem name="blur" type="string | null">

Last editor ID that has been blurred.

</APIItem>

<APIItem name="focus" type="string | null">

Editor ID that is currently being focused.

</APIItem>

<APIItem name="last" type="string | null">

Last editor ID.

</APIItem>
</APIAttributes>

### `useEventEditorSelectors`

Hook selectors.

- **Example:** `useEventEditorSelectors().focus()` will get the
  last focused editor ID.

### `useEventPlateId`

Get the last event editor ID.

<APIParameters>
<APIItem name="id" type="string | null">

Returned ID if defined.

</APIItem>
</APIParameters>

<APIReturns>
  The plate id from the context if available, otherwise the last event editor
  ID or `PLATE_SCOPE`.
</APIReturns>
